<template>
  <!--  费用时间选择-->
  <div class="Price_Time">
    <el-date-picker
      v-model="times"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      style="width: 50%"
      @change="timeChange"
    />
    <div v-if="showBtnSelect" class="choose_time_group">
      <el-radio-group v-model="chooseTime" size="small" @change="btnChange">
        <el-radio-button :label="1">当日</el-radio-button>
        <el-radio-button :label="2">当月</el-radio-button>
        <el-radio-button :label="3">本季度</el-radio-button>
        <el-radio-button :label="4">半年</el-radio-button>
        <el-radio-button :label="5">本年</el-radio-button>
      </el-radio-group>
    </div>
  </div>
</template>

<script>
import {
  getToday,
  getMonthStartToEnd,
  getQuarterStartToEnd,
  getHalfYearStartToEnd,
  getFullYearStartToEnd
} from '../../../utils/get-date'
import { FormatDateNoTime } from '../../../utils'

export default {
  name: 'PriceTime',
  components: {},
  mixins: [],
  props: {
    showBtnSelect: { //  按钮选择是否显示
      type: Boolean,
      default: true
    },
    showDefaultDate: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      times: [],
      chooseTime: ''
    }
  },
  computed: {
  },
  watch: {
    // 'dataObjTime': function(v) {
    //   console.log(v)
    //   if (v.length === 0) {
    //     this.times = []
    //     this.chooseTime = ''
    //   }
    // }
  },
  created() {
  },
  mounted() {
    this.defaultDate()
  },
  methods: {
    //  设置默认时间
    defaultDate() {
      if (this.showDefaultDate) {
        this.times = [getToday(), getToday()]
        this.$emit('change', [this.times[0].replace(/\//g, ''), this.times[1].replace(/\//g, '')])
      } else {
        this.times = []
        this.$emit('change', [])
      }
    },
    //  重置
    reset() {
      this.defaultDate()
      this.chooseTime = ''
    },
    btnChange(v) {
      switch (v) {
        case 1:
          this.times = [getToday(), getToday()]
          break
        case 2:
          this.times = getMonthStartToEnd()
          break
        case 3:
          this.times = getQuarterStartToEnd()
          break
        case 4:
          this.times = getHalfYearStartToEnd('before')
          break
        case 5:
          this.times = getFullYearStartToEnd()
          break
      }
      this.$emit('change', [this.times[0].replace(/\//g, ''), this.times[1].replace(/\//g, '')])
    },
    timeChange(v) {
      this.chooseTime = ''
      if (v) {
        this.$emit('change', [FormatDateNoTime(v[0]).replace(/\//g, ''), FormatDateNoTime(v[1]).replace(/\//g, '')])
      } else {
        this.$emit('change', [])
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .Price_Time {
    /deep/ .choose_time_group {
      display: inline-block;
      .el-radio-group .el-radio-button__inner {
        width: 50px;
        padding: 9px 0;
      }
    }
  }
</style>
